import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlowerService } from './flower.service';
import { AComponent } from './a.component';
import { BComponent } from './b.component';

@Component({
  selector: 'app-root',
  standalone: true,
  providers: [{ provide: FlowerService, useValue: new FlowerService('🌹') }],
  viewProviders: [
    { provide: FlowerService, useValue: new FlowerService('🌷') },
  ],
  template: `
    provide: 🌹
    <div class="p-2 m-2 border-2 border-dashed border-red-400 rounded-lg">
      <p>provide: 🌷</p>
      <app-a>
        <app-b [prefix]="projectionPrefix" />
      </app-a>
      <app-b [prefix]="prefix" />
    </div>
  `,
  styles: `
    :host {
      display: block;
      @apply p-2 m-2 border-2 border-red-600 rounded;
      width: 35rem;
    }
  `,
  imports: [CommonModule, AComponent, BComponent],
})
export class AppComponent {
  prefix = "App's View";
  projectionPrefix = 'App, Projected to A';
}
